<template>
  <div>
    <el-card>
      <!-- 3id不存在时禁用三级导航 -->
      <el-button
        :disabled="!categoryStore.category3Id"
        style="margin-bottom: 10px"
        type="primary"
        :icon="Plus"
        @click="toAddSpuInfo"

        >添加SPU</el-button
      >
      <el-table border align="center" style="width: 100%" :data="spuList">
        <el-table-column
          label="序号"
          type="index"
          width="100px"
          align="center"
        ></el-table-column>
        <el-table-column label="SPU名称" prop="spuName"></el-table-column>
        <el-table-column label="SPU描述" prop="description"></el-table-column>
        <el-table-column label="操作" prop="address">
          <template v-slot="{ row, $index }">
            <el-button type="primary" :icon="Plus" title="添加SKU" @click="getSkuInfo(row)"></el-button>
            <el-button type="primary" :icon="Edit" @click="toEditApuInfo(row)" title="修改SPU"></el-button>
            <el-button type="info" :icon="InfoFilled" title="查看SKU列表" @click="checkSkuList(row)"></el-button>
            <el-popconfirm
              confirm-button-text="确定"
              cancel-button-text="取消"
              :icon="InfoFilled"
              icon-color="#626AEF"
              title="真的确定要删除此条数据么?"
              @confirm="deleteSpuInfo(row.id)"
            >
              <template #reference>
                <el-button
                  title="删除"
                  type="danger"
                  size="default"
                  :icon="Delete"
                />
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <el-pagination
        style="margin-top: 15px"
        v-model:currentPage="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[3, 5, 10, 20]"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout=" prev, pager, next, jumper, ->, sizes,total "
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>

    <!-- skuList弹框 -->
    <el-dialog v-model="showSkuListDialog" :title="spuName">
      <el-table :data="skuList">
        <el-table-column label="名称" property="skuName"></el-table-column>
        <el-table-column label="价格（元）" property="price"></el-table-column>
        <el-table-column label="重量（KG）" property="weight"></el-table-column>
        <el-table-column label="默认图片">
          <template v-slot="{row}">
            <el-image :src="row.skuDefaultImg" style="width:100px"></el-image>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script lang="ts">
export default {
  name: "SpuList",
};
</script>
<script lang="ts" setup>
import { ref, watch } from "vue";
import { Plus, Edit, Delete, InfoFilled  } from "@element-plus/icons-vue";
import { reqGetSpuListData,reqDeleteSpuInfo } from "@/api/product/spu";
import {reqGetSkuList} from "@/api/product/sku";
import { useCategoryListStore } from "@/stores/categoryList";
import {ElMessage } from 'element-plus';
const categoryStore = useCategoryListStore();
// 分页器部分： 定义分页数据
const currentPage = ref<number>(1); //默认是第一页
const pageSize = ref<number>(5); //默认三条
const total = ref(0);
const spuList = ref([]);
const small = ref(false);
const background = ref(false);
const disabled = ref(false);
const emits = defineEmits(["changeScene","toSpuFormGetData"]);

// 单击当前页码实现分页
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`);
  currentPage.value = val;
  getSpuListData();
};
// 修改每页显示的条数
const handleSizeChange = (val: number) => {
  pageSize.value = val;
  currentPage.value = 1;
  getSpuListData();
};
// 先封装获取spu列表的函数
const getSpuListData = async () => {
  const result = await reqGetSpuListData(
    currentPage.value,
    pageSize.value,
    categoryStore.category3Id
  );
  console.log(result);
  spuList.value = result.records;
  total.value = result.total;
};
// 监听三级id的变化获取spu列表
watch(
  () => categoryStore.category3Id,
  (category3Id) => {
    // 要作一个判断
    if (!category3Id) {
      // 清空原本的数据，不发送请求
      spuList.value = [];
      return;
    }
    getSpuListData();
  },
  { immediate: true }
);

// 添加前清空之前的值
const toAddSpuInfo = () => {
  emits('changeScene',2)
  emits('toSpuFormGetData',{})
}
// 删除按钮
const deleteSpuInfo = async(id:number) => {
  const result = await reqDeleteSpuInfo(id)
  ElMessage.success('删除spu成功')
   getSpuListData();
}

// 更新spu
const toEditApuInfo = (row) => {
  emits('changeScene',2)
  emits('toSpuFormGetData',row)
}
// 添加sku
const getSkuInfo = (row) => {
  emits('changeScene',3)
  emits('toSpuFormGetData',row)
}

// 查看skuList
const skuList = ref([])
const showSkuListDialog = ref(false)
const spuName = ref('')
const checkSkuList =async (row) => {
  // 发送请求，获取列表数据
  skuList.value =  await reqGetSkuList(row.id)
  showSkuListDialog.value=true
  spuName.value = row.spuName
}
</script>

<style>
</style>